<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    default-expand-all
    :render-content="render"
    :expand-on-click-node="false"
  ></el-tree>
</template>

<script>
import _ from "lodash";
export default {
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
    fileDrop: Array,
    directorDrop: Array,
    delete: Function,
    rename: Function,
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentId: "",
      currentVal: "",
    };
  },
  methods: {
    isParent(val) {
      return val.children ? true : false;
    },
    changeVal(v) {
      this.currentVal = v;
    },
    comfirm() {
      let cloneList = _.cloneDeep(this.treeData);
      let item = cloneList.find((ele) => ele.id == this.currentId);
      item.name = this.currentVal;
      this.rename().then((res) => {
        this.$emit("update:treeData", cloneList);
        this.cancel();
        this.$Message({
          type: "success",
          message: res.message,
        });
      });
    },
    cancel() {
      this.currentId = "";
      this.currentVal = "";
    },
    render(h, { data, node }) {
      let list = this.isParent(data) ? this.directorDrop : this.fileDrop;
      return (
        <div class="flex f-x-b  f-y-c w100">
          <div class="flex f-x-s f-y-c">
            {this.isParent(data) ? (
              node.expanded ? (
                <i class="el-icon-folder-opened"></i>
              ) : (
                <i class="el-icon-folder"></i>
              )
            ) : (
              <i class="el-icon-document"></i>
            )}

            {this.currentId == data.id ? (
              <div class="flex">
                <el-input
                  value={this.currentVal}
                  oninput={this.changeVal}
                ></el-input>
                <span>
                  <el-button type="text" onclick={this.comfirm}>
                    确定
                  </el-button>
                  <el-button type="text" onclick={this.cancel}>
                    取消
                  </el-button>
                </span>
              </div>
            ) : (
              data.name
            )}
          </div>
          {this.currentId != data.id ? (
            <el-dropdown
              trigger="click"
              placement="bottom-start"
              oncommand={this.handleCommand.bind(this, data)}
            >
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                {list.map((item) => {
                  return (
                    <el-dropdown-item command={item.action}>
                      {item.label}
                    </el-dropdown-item>
                  );
                })}
              </el-dropdown-menu>
            </el-dropdown>
          ) : null}
        </div>
      );
    },
    handleCommand(data, command) {
      console.log(data, command);
      if (command == "delete") {
        this.handleDelete(data.id);
      } else if (command == "update") {
        this.handleRename(data);
      }
    },
    remove(id) {
      let cloneList = _.cloneDeep(this.treeData);
      let list = cloneList.filter((ele) => ele.id !== id);
      console.log(list);
      this.$emit("update:treeData", list);
      this.$Message({
        type: "success",
        message: "删除成功",
      });
    },
    handleDelete(id) {
      this.MessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete &&
            this.delete(id).then(() => {
              this.remove(id);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    handleRename(data) {
      this.currentId = data.id;
      this.currentVal = data.name;
    },
  },
};
</script>

<style>
.flex {
  display: flex;
}
.f-x-s {
  justify-content: start;
}
.f-y-c {
  align-items: center;
}
.f-x-b {
  justify-content: space-between;
}
.w100 {
  width: 100%;
}
.el-tree-node__content {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  height: 36px;
  line-height: 36px;
}
.el-tree .el-input {
  margin: 0 10px;
}
.el-tree .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
